<script setup>
import { onPageScroll, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import { onMounted, ref } from 'vue'
import { getShopList } from '@/api/shop'
import NavBar from '@/components/NavBar.vue'
import { fixCoverImageUrl } from '@/utils/fixImageUrls'

// 滚动距离，用于导航栏背景色渐变
const scrollTop = ref(0)
onPageScroll((event) => {
  scrollTop.value = event.scrollTop
})

const shopList = ref([]) // 商家列表
const shopTotal = ref(0) // 总条数
// 查询参数
const searchQuery = ref({
  orderBy: 'dianzan',
  name: '',
  pageNo: 1,
  pageSize: 20,
})
// 搜索类型
const searchTypeList = [
  { name: '按点赞数', value: 'dianzan' },
  { name: '按喜欢数', value: 'xihuan  ' },
  { name: '按收藏数', value: 'shoucang' },
]
// 修改搜索类型
function onChangeSearchType(val) {
  shopList.value = []
  searchQuery.value.orderBy = val
  searchQuery.value.pageNo = 1
  onGetShopList()
}
// 获取商家列表
async function onGetShopList() {
  await uni.showLoading({
    title: '加载中',
  })
  const { result: { records, total } } = await getShopList(searchQuery.value)
  shopList.value = [...shopList.value, ...records.map(item => ({ ...item, url: fixCoverImageUrl(item.cover) }))]
  shopTotal.value = total
  uni.hideLoading()
}
// 手动搜索商家
function onManualSearch() {
  shopList.value = []
  searchQuery.value.pageNo = 1
  onGetShopList()
}
// 触底加载
onReachBottom(() => {
  if (shopList.value.length < shopTotal.value) {
    searchQuery.value.pageNo++
    onGetShopList()
  }
})

function goShopDetail(item) {
  uni.navigateTo({ url: `/pages/shop/view/shop-detail?id=${item.id}` })
}

onMounted(() => {
  onGetShopList()
})

onPullDownRefresh(async () => {
  shopList.value = []
  searchQuery.value.pageNo = 1
  await onGetShopList()
  uni.stopPullDownRefresh()
})
</script>

<template>
  <view class="bg-[#F5F5F5] pb-safe min-h-safe">
    <NavBar title="商家列表" :scroll-top="scrollTop" :show-left-icon="false" />
    <main class="pt-1.5">
      <view class="px-3 mb-1.5 bg-white">
        <nut-searchbar v-model="searchQuery.name" placeholder="搜索商家">
          <template #leftin>
            <nut-icon name="search2" />
          </template>
          <template #rightout>
            <text class="text-[#FF4D00]" @click="onManualSearch">
              搜索
            </text>
          </template>
        </nut-searchbar>
      </view>
      <view class="px-7 py-1.5 mb-1.5 bg-white flex">
        <view
          v-for="item in searchTypeList"
          :key="item.value"
          class="mr-1.5 text-22"
          @click="onChangeSearchType(item.value)"
        >
          <template v-if="searchQuery.orderBy === item.value">
            <view class="px-2 py-1.5 bg-[#FFD3A4] rounded-full text-[#FF4D00]">
              {{ item.name }}
            </view>
          </template>
          <template v-else>
            <view class="px-2 py-1.5 bg-[#F2F2F2] rounded-full text-[#666]">
              {{ item.name }}
            </view>
          </template>
        </view>
      </view>
      <view class="px-2 flex flex-wrap justify-between">
        <view
          v-for="item in shopList"
          :key="item.name"
          class="mb-1.5 bg-white rounded shadow flex flex-col w-352 overflow-hidden"
          @click="goShopDetail(item)"
        >
          <image class="h-352 w-352" :src="item.url" mode="aspectFill" />
          <p class="px-1.5 py-2 text-28">
            {{ item.name }}
          </p>
          <view class="px-3 pb-2.5 flex justify-between">
            <view class="text-[#666] center">
              <view class="i-ant-design:heart-outlined" />
              <view class="pl-0.5 text-20">
                {{ item.xihuan }}
              </view>
            </view>
            <view class="text-[#666] center">
              <view class="i-ant-design:star-outlined" />
              <view class="pl-0.5 text-20">
                {{ item.shoucang }}
              </view>
            </view>
            <view class="text-[#666] center">
              <view class="i-ant-design:like-outlined" />
              <view class="pl-0.5 text-20">
                {{ item.dianzan }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </main>
  </view>
</template>
